<template>
  <div class="my-echart-relational">
    <span class="title">卡路里关系图</span>
    <v-chart :option="mychart_relational" id="mychart_relational"></v-chart>
  </div>
</template>

<script>
export default {
  name: 'my_echarts_relational',
  data() {
    return {
      data: null,
      mychart_relational: null
    }
  },
  methods: {
    getData(data) {
      this.data = data;
      this.chartRenderer();
    },
    /**
     * 获取数据后，渲染词云图
     */
    chartRenderer() {
      var colorList = [
        "#f1a500",
        "#50c48f"
      ]

      var nodes = []; //记录节点
			var links = []; //记录关联
			var types = ['类别点']; //记录类别

      // 处理类别数据 types
      var map = new Map();
      for(var name in this.data) {
        //第一层遍历，取到 item: name
        for (var character of this.data[name]['character']) {
          if(map.has(character)) {
            let value = map.get(character);
            map.set(character, ++value);
          } else {
            map.set(character, 1);
          }
        }
      }
      var index = 0;
      for(let key of map) {
        if(types.indexOf(key[0]) == -1 && key[1] > 2) {
          types.push(key[0]);
          nodes.push({
            name: key[0],
            category: 0,
            value: key[0],
            symbolSize: Math.round(Math.random() * 20 + 40),
            itemStyle: {
              normal: {
                shadowBlur: 10,
                shadowColor: colorList[index % 2],
                color: colorList[index % 2],
                borderColor: 'rgba(255, 255, 255, 0.5)',
                borderWidth: 1
              }
            },
            label: {
              show: true,
              fontSize: 16
            }
          })
          index++;
        }
      }

      // 处理节点数据 nodes
      for(var name in this.data) {
        let size = 10;
        let name_value = this.data[name];
        if(name_value['size'] >= 1000) size = name_value['size'] / 50;
        else if(name_value['size'] >= 600) size = name_value['size'] / 30;
        else size = name_value['size'] / 10;
        nodes.push({
          name: name,
          category: types.indexOf(name_value['character'][0]),
          value: name_value['character'].join(' , '),
          symbolSize: size
        })
      }

      // 处理关系数据 links
      for(var name in this.data) {
        for(var type of this.data[name]['character']) {
          links.push({
            source: name,
            target: type,
            value: this.data[name]['size']
          })
        }
      }

      var categories = [];
      var selected = {};
      for(var value of types) {
        categories.push({
          name: value
        })
      }

      this.mychart_relational = {
        tooltip: {},
        label: {
          color: '#fff'
        },
        textStyle: {
          fontSize: 14
        },
        legend: [
          {
            data: types,
            padding: 60,
            selected: selected,
            selector: true //开启全选和反选按钮
          }
        ],
        series: [
          {
            type: 'graph',
            layout: 'force', //选择力导向图，因为我们的关系数据没有x,y坐标
            data: nodes, //传入结点数据
            links: links, //传入关系数据
            categories: categories,
            edgeSymbol: ['none', 'arrow'],
            edgeSymbolSize : 5,
            roam: true,//是否开启鼠标滚轮缩放
            label: {
              position: 'inside'
            },
            lineStyle: {
                width: 1
            },
            force: {
              repulsion: 100, // types 类别球之间的距离
              edgeLength: [5, 80] // nodes 球之间的距离
            },
            emphasis: {
              focus: 'adjacency',
              lineStyle: {
                width: 5
              }
            }
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
  .my-echart-relational {
    width: 100%;
    height: 680px;
    position: absolute;
    top: 200px;
    left: 0;
    background-color: #eee;
    border-top: 12px solid #aaaaaa;
    border-left: 12px solid #706961;
    border-right: 12px solid #706961;
    border-bottom: 12px solid #cccccc;
    z-index: 1;
    box-sizing: border-box;
    box-shadow: 0 20px 30px rgba(80, 80, 80, .5);
  }

  #mychart_relational {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    box-sizing: border-box;
  }

  .title {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 24px;
    letter-spacing: 1px;
    color: #333;
  }
</style>